
<template>
  <div class="page-search">
    <mt-search 
      autofocus 
      v-model="value" 
      :result="filterResult">
    </mt-search>

    <div class="input_Label">
      <h2>热门搜索</h2>
      <span v-for="(item,index) in Hotspan" :key="index">{{item.title}}</span>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'page-search',
  data() {
    return {
      value: '',
      // 默认数据
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ],
      Hotspan:[
         {
          title:"公务员"
         },
         {
          title:"考研政治"
         },
         {
          title:"财会金融"
         },
         {
          title:"职场"
         },
         {
          title:"工程造价"
         },
         {
          title:"护士资格考取"
         }
      ]
    };
  },
  computed: {
    filterResult() {
      return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value));
    }
  }
};
</script>
 
<style lang="less">
.mint-search{
  width: 100%;
  height:50px;
}
.mint-searchbar{
  background-color: rgba(255,255,255)
}
  .page-search {
    width: 100%;
    height:610px;
    background-color: rgba(255,255,255)
  }
  .mint-searchbar-inner .mintui-search{
    font-size:18px;
    color:rgba(186,186,186);
  }
  .mint-searchbar-inner{
    border-radius: 5px;
    background-color:rgba(246,246,246);
  }
  .mint-searchbar-cancel{
    color:rgba(52,52,52);
  }

  .input_Label{
    width: 355px;
    height:355px;
    margin:0 auto;
    text-align: left;
  }
  .input_Label h2{
      text-align: left;
  }
  .input_Label span{
    display:inline-block;
    border:1px solid rgba(213,213,213);
    border-radius:20px;
    margin-left:10px;
    padding: 3px 15px;
    margin-top:10px;

  }
</style>
